<template>
  <div>
    <el-row>
      <div  ref="chart"
        style="width: 580px; height: 350px;background-color: rgb(255, 255, 255);position: relative;float: left;top: 10px;left: 30px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
      </div>
      <div  ref="chart2"
        style="width: 580px; height: 350px;background-color: rgb(255, 255, 255);position: relative;top: 10px;float: left;left: 120px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
      </div>
      <!-- <div v-if="userAll.sid == 3 || userAll.sid == 7" ref="chart3"
        style="width: 580px; height: 350px;background-color: rgb(255, 255, 255);position: relative;float: left;top: 10px;left: 30px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
      </div>
      <div v-if="userAll.sid == 3 || userAll.sid == 7" ref="chart4"
        style="width: 580px; height: 350px;background-color: rgb(255, 255, 255);position: relative;top: 10px;float: left;left: 120px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
      </div> -->
    </el-row>
    <el-row>
      <el-col>
        <!-- 商品表格展示 -->
        <el-table ref="multipleTable" :data="goodsList" tooltip-effect="dark"
          style="width: 95%;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);text-align: center;position: relative;top: 20px;left: 30px;">
          <el-table-column label="正在上架的产品" header-align="center" align="center"
            style="color: lightpink;font-size: 1.5em;">
            <el-table-column prop="goodsName" label="商品名" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="goodsNumber" label="商品编号" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="meteriType" label="材质" header-align="center" align="center">
            </el-table-column>
            <el-table-column label="产品线" header-align="center" align="center">
              <template slot-scope="scope">{{ scope.row.area }}{{ scope.row.producter }}</template>
            </el-table-column>
            <el-table-column prop="categoryType" label="品类" header-align="center" align="center">
            </el-table-column>
            <el-table-column prop="time" label="日期" :formatter="formatDate" header-align="center" align="center">
            </el-table-column>
          </el-table-column>

        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from "echarts";

export default {
  name: "home",

  data() {
    return {
      currentPage: 1, //当前页
      pageSize: 10, //每页大小
      totalPage: 1, //总页数
      //记录角色
      //记录账号
      userAll: null,
      role: null,
      //销售
      tableData: [],
      tableData2: [],
      //财务
      tableData3: [],
      tableData4: [],
      //展示商品信息
      goodsList: []
    };
  },
  methods: {
    //---------------------------------------------销售
    renderChart() {
      const chart = echarts.init(this.$refs.chart);
      const option = {
        title: { text: '本月产品销售总排行表' },
        xAxis: {
          type: "category",
          data: this.tableData.map(item => item[0])
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.tableData.map(item => item[1]),
            type: "bar",
            color: "pink",
            barWidth: "60%",
            // 调整柱状图的宽度和间隔大小
            barGap: '5%'
          }
        ]
      };
      chart.setOption(option);
    },
    renderChart2() {
      const chart2 = echarts.init(this.$refs.chart2);
      const option = {
        title: { text: '本月已缴纳定金产品排行榜' },
        xAxis: {
          type: "category",
          data: this.tableData2.map(item => item[0])
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.tableData2.map(item => item[1]),
            type: "bar",
            color: "#add8e6",
            barWidth: "60%",
            // 调整柱状图的宽度和间隔大小
            barGap: '5%'
          }
        ]
      };
      chart2.setOption(option);
    },
    //----------------------------------------财务
    renderChart3() {
      const chart3 = echarts.init(this.$refs.chart3);
      const option = {
        title: { text: '本月产品销售总排行表' },
        xAxis: {
          type: "category",
          data: this.tableData3.map(item => item[0])
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.tableData3.map(item => item[1]),
            type: "bar",
            color: "pink",
            barWidth: "60%",
            // 调整柱状图的宽度和间隔大小
            barGap: '5%'
          }
        ]
      };
      chart3.setOption(option);
    },
    renderChart4() {
      const chart4 = echarts.init(this.$refs.chart4);
      const option = {
        title: { text: '本月产品销售总排行表' },
        xAxis: {
          type: "category",
          data: this.tableData4.map(item => item[0])
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.tableData4.map(item => item[1]),
            type: "bar",
            color: "pink",
            barWidth: "60%",
            // 调整柱状图的宽度和间隔大小
            barGap: '5%'
          }
        ]
      };
      chart4.setOption(option);
    },
    //身份鉴别的方法
    fundUser: function () {
      this.$axios
        .get(
          "/user/findUserByAccount/" + window.localStorage.getItem("account")
        )
        .then(res => {
          console.log(res.data.data);
          this.userAll = res.data.data;
          this.role = res.data.data.roleList[0].name;
          console.log(this.role);
        });
    },
    //产品列表
    aaa: function () {
      let a = {
        currentPage: this.currentPage,
        size: this.pageSize
      };
      this.$axios.post("goods/selectPage", a).then(res => {
        console.log(res.data); // 保存菜单
        this.goodsList = res.data.data.records;
        console.log("状态为0的");
        console.log(this.goodsList01);
      });
    },
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      let dt = new Date(data);
      return (
        dt.getFullYear() +
        "-" +
        (dt.getMonth() + 1) +
        "-" +
        dt.getDate() +
        " " +
        dt.getHours() +
        ":" +
        dt.getMinutes() +
        ":" +
        dt.getSeconds()
      );
    },
    //--------------------------------------------销售
    sale1: function () {

      this.$axios.get("saleOrder/findTopPaid").then(res => {
        console.log(res.data.data);
        var aaa = res.data.data
        for (let index = 0; index < aaa.length; index++) {
          var b = []
          b.push(aaa[index].goodsName)
          b.push(aaa[index].count)
          this.tableData.push(b)
        }
        console.log(this.tableData);

      });
    },
    sale2: function () {
      this.$axios.get("saleOrder/findToUnpPaid").then(res => {
        console.log(res.data.data);
        var aaa = res.data.data
        for (let index = 0; index < aaa.length; index++) {
          var b = []
          b.push(aaa[index].goodsName)
          b.push(aaa[index].count)
          this.tableData2.push(b)
        }
        console.log(this.tableData);
      });
    },
    //----------------------------------------------财务
    finance1: function () {
      this.$axios.get("businessCompetitor/findClientNameAndBalance").then(res => {
        console.log(res.data.data);
        var aaa = res.data.data
        for (let index = 0; index < aaa.length; index++) {
          var b = []
          b.push(aaa[index].name)
          b.push(aaa[index].balance)
          this.tableData3.push(b)
        }
        console.log(this.tableData3);
      });
    },
    finance2: function () {
      this.$axios.get("businessCompetitor/findClientNameAndRechargeTotal").then(res => {
        console.log(res.data.data);
        var aaa = res.data.data
        for (let index = 0; index < aaa.length; index++) {
          var b = []
          b.push(aaa[index].name)
          b.push(aaa[index].balance)
          this.tableData4.push(b)
        }
        console.log(this.tableData4);
      });
    },
  },
  mounted() {
    //身份鉴别
    this.fundUser();
    //柱状图
    //
    setTimeout(() => {
      // 延迟执行mounted钩子函数中的代码
      this.renderChart();
      this.renderChart2()
      //this.renderChart3()
     // this.renderChart4()
    }, 600);
    //产品
    this.aaa();
    //销售
    this.sale1()
    this.sale2()
  //  this.finance1()
   // this.finance2()
  }
};
</script>

<style scoped>
body,
.el-table {
  text-align: center;
}

html {
  margin: 0;
  padding: 0;
}

.el-aside {
  color: #333;
  background-color: #545c64;
  height: 100vh;
  margin: 0;
}

.el-main {
  background-color: #e8e8e8;
  height: 100vh;
  margin: 0;
}

body>.el-container {
  margin: 0;
  height: 100vh;
}
</style>
